<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">

<dom-module id="app-costs-per-tag">
    <template>
        <style include="shared-styles headings tags-and-labels">
        :host {
            transition: var(--material-curve-320);
            transform: translate(0, 60px);
            opacity: 0;
            padding: 0;
            margin: 0;
        }

        :host(.active) {
            transform: translate(0, 0);
            opacity: 1;
        }

        h3 {
            text-transform: uppercase;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.54);
            padding: 0 10px;
            border-bottom: 1px solid #eee;
        }
        paper-material {
            overflow: hidden !important;
            margin-top: 32px
        }

        .list-item {
            border-bottom: 1px solid #eee;
            padding: 6px 10px;
            min-width: 33%;
        }

        .list-item:last-child {
            border-bottom: 0 none;
            padding-top: 16px;
        }
        .flex {
            @apply --layout-flex;
        }
        .flex3child {
            @apply --layout-flex-3;
        }

        :host(.active) .block {
            transform: translate(0, 0);
            opacity: 1;
            height: 100%;
        }
        table {
            table-layout: fixed;
            width: 100%;
            padding: 0 6px;
            margin-bottom: 6px;
        }
        table tr {
            border-bottom: 1px solid #eee;
        }
        table td {
            padding: 4px 6px;
            overflow: hidden;
            max-width: 100%;
        }
        .name, .cost {
            font-weight: 500;
        }
        .count {
            color: rgba(0,0,0,0.54);
            text-align: right;
        }
        /*.count ,
        .cost {
            width: 120px;
        }*/
        .text-right {
            text-align: right;
        }
        section-tile ::slotted(paper-material) {
            background-color: #ffff8d;
        }
        section-tile ::slotted(h2)  {
            color: rgba(0,0,0,0.54) !important;
            padding: 23px 4px !important;
        }
        section-tile {
            position: relative;
        }
        .sub {
            padding: 8px;
            font-size: 0.8em;
            color: rgba(0,0,0,0.32);
            display: block;
        }
        iron-icon#costdocs {
            width: 20px;
            height: 20px;
            opacity: 0.54;
            float: right;
        }                
        </style>
        <paper-material class="flex3child" hidden$="[[!tags.length]]">
            <h3>Top [[tags.length]] tags
                <!-- <a href="http://docs.mist.io/article/103-cost-reporting-with-mist-io" target="new"> <iron-icon id="costdocs" icon="help" position="left"></iron-icon> --></a>
            </h3>
            <table>
                <template is="dom-repeat" items="[[tags]]">
                    <tr>
                        <td colspan="3" class="tag">[[item.key]] <span hidden$="[[!item.value]]"> = [[item.value]] </span></td>
                        <td class="count">[[item.count]] machines </td>
                        <td class="text-right cost">$[[item.cost]]</td>
                    </tr>
                </template>
            </table>
        </paper-material>
    </template>
</dom-module>
<script>
Polymer({
    is: 'app-costs-per-tag',
    properties: {
        model: {
            type: Object
        },
        tags: {
            type: Array,
            computed: '_computeTags(model.cloudsArray.*, model.machines.*)'
        }
    },
    attached: function() {
        var rows = this.parentNode.querySelectorAll('block');
        var index = Array.prototype.indexOf.call(rows, this);
        setTimeout(function() {
            this.classList.add('active');
        }.bind(this), (index + 1) * 50);
    },
    _computeTags: function(clouds, machines) {
        var tagsArray = [];
        if (Object.keys(this.model.machines).length > 0) {
            Object.values(this.model.machines).forEach(function(m){
                var mcost = m.cost ? m.cost.monthly : false;
                if (m.tags && m.tags.length  && mcost){
                    m.tags.forEach(function(t){
                        var tagExists = tagsArray.find(function(prevt, index){
                            return prevt.key == t.key && prevt.value == t.value;
                        });
                        if (tagExists){
                            tagExists.count ++;
                            tagExists.cost = tagExists.cost + Math.round(parseInt(mcost));
                        } else {
                            var tag = t;
                            tag.cost = Math.round(parseInt(mcost));
                            tag.count = 1;
                            tagsArray.push(tag);
                        }                        
                    });
                }                
                
            });
        }
        // sort by cost
        tagsArray.sort(function (a, b) {
            if (a.cost > b.cost) { return -1; }
            if (a.cost < b.cost) { return 1; }
            return 0;
        });
        // return all clouds instead of topCloudsArray.slice(0,3);
        return tagsArray.slice(0,7);
    }
});
</script>
